<template>
  <div v-loading="loading">
    <div class="flex-between mb-10">
      <el-input
        v-model="searchValue"
        placeholder="搜索"
        style="width: 240px"
        prefix-icon="Search"
        class="w-240"
        clearable
        @change="onSearch"
      >
      </el-input>
      <el-space size="default">
        <el-button type="primary" icon="Plus" @click="showAppend"
          >创建项目</el-button
        >
      </el-space>
    </div>
    <common-table
      :table-type="tableType"
      :table-data="tableData"
      :on-selection-change="onSelectionChange"
      v-model:total="currentTotal"
      v-model:page="currentPage"
      v-model:pageSize="pageSize"
      :handle-current-change="handleCurrentChange"
      :showPagination="true"
    >
      <template #operation>
        <el-table-column label="操作" width="160" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" @click="showDetail(row)">
              详情
            </el-button>
            <el-button link type="primary" @click="showEditor(row)">
              编辑
            </el-button>
            <el-button link type="danger" @click="onDelete(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </template>
    </common-table>
    <ProjectFormDialog ref="ProjectFormDialogRef" @refresh="refresh" />
    <ProjectDetailDrawer ref="ProjectDetailDrawerRef" />
  </div>
</template>

<script setup lang="ts">
import ProjectDetailDrawer from "./ProjectDetailDrawer.vue";
import ProjectFormDialog from "./ProjectFormDialog.vue";
import { onMounted, reactive, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

import api from "@/api";
import { tableType } from "./utils";

const loading = ref(false);
const searchValue = ref("");

const tableData = ref<any[]>([]);
const tableSelection = ref<any[]>([]);

const ProjectFormDialogRef = ref();
const ProjectDetailDrawerRef = ref();

const currentPage = ref(1);
const currentTotal = ref(0);
const pageSize = ref(20);

const onSelectionChange = (val: any[]) => {
  tableSelection.value = val;
};
/*
 * Static state
 * */
function getTableData(val: number, name?: string) {
  loading.value = true;
  api.project
    .listPageCourseList(val, 15, name)
    .then((res: any) => {
      if (res.success) {
        tableData.value = res.data.records;
        currentTotal.value = res.data.total;
        loading.value = false;
      }
    })
    .catch(() => {
      loading.value = false;
    });
}

//Delete
function onDelete(row: any) {
  ElMessageBox.confirm(`确认删除 ${row.name} 吗?`, "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      api.project.deleteCourseList(row.id).then((res: any) => {
        ElMessage({
          message: res.message,
          type: res.success ? "success" : "error",
          grouping: true,
          showClose: true,
        });
        refresh();
      });
    })
    .catch(() => {});
}

// Append
function showAppend() {
  ProjectFormDialogRef.value.open();
}
// Editor
function showEditor(row: any) {
  ProjectFormDialogRef.value.open(row);
}

//Detail
function showDetail(row: any) {
  ProjectDetailDrawerRef.value.open(row);
}

//Pager

const handleCurrentChange = (val: number) => {
  getTableData(val);
};

function refresh() {
  getTableData(currentPage.value);
}
function onSearch() {
  getTableData(1, searchValue.value);
}

onMounted(() => {
  getTableData(1);
});
</script>
